import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  InteractionManager,
  SafeAreaView
} from 'react-native';
import {
  mainBgColorLightGray,
  screenWidth,
  px2dp
} from '@/styles';
import { msg, _ } from '@/common';
import { customStyle } from '@/common/util';
import { getParameter } from '@/api/truck';
import ConRowTip from './con-row-tip';
import ConRow from './con-row';
import EmptyPage from '../../../../components/EmptyPage';

/**
 *
 * @author kanglang
 * @description 卡车配置
 * @createDate 2020/8/17
 *
 */
export default class CarConfiguration extends Component {
  constructor(props) {
    super(props);
    this.state = {
      configDetail: {},
      isLoading: true
    };
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.loadConfiguration();
    });
  }

  loadConfiguration = () => {
    const { categoryId, goodsId } = this.props;
    const configParams = {
      categoryId,
      goodsId
    };
    getParameter(configParams).then((res) => {
      this.setState({ isLoading: false });
      if (res.success) {
        if (res.data) {
          const configDetail = res.data && res.data.categoryParameterVO || [];
          this.setState({ configDetail });
        } else {
          msg.emit('app:tip', { text: res.msg });
        }
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  }

  render() {
    const { configDetail, isLoading } = this.state;
    return (
      <SafeAreaView style={styles.safeView}>
        <View style={styles.container}>
          <ScrollView showsVerticalScrollIndicator={false} style={{ width: screenWidth }}>
            {
              isLoading ? null :
                configDetail.length > 0 ? configDetail.map((item, index) => {
                  const parameterVOList = item.apiGoddsCategoryParameterVOList;
                  return (
                    <View style={styles.headerWrap} key={index}>
                      {
                        parameterVOList.length > 0 && <ConRowTip title={item.name} />
                      }
                      {
                        parameterVOList.length > 0 && parameterVOList.map((itemA, indexA) => {
                          let boderBottm = 0;
                          if (indexA == parameterVOList.length - 1) {
                            boderBottm = px2dp(1);
                          }
                          const { goodsInfoParameterVOS } = itemA;
                          let content = '';
                          goodsInfoParameterVOS.map((itemB, indexB) => {
                            if (indexB == goodsInfoParameterVOS.length - 1) {
                              content += itemB.value;
                            } else {
                              content += `${itemB.value},`;
                            }
                          });
                          return (
                            <ConRow
                              key={indexA}
                              style={{ borderBottomWidth: boderBottm }}
                              leftTitle={itemA.name}
                              rightContent={content || '-'}
                            />
                          );
                        })
                      }
                    </View>
                  );
                }) : <EmptyPage />
            }
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }

  newHtml() {
    const { goodsDetail } = this.state;
    const content = goodsDetail && goodsDetail.content;
    return {
      html: customStyle + content
    };
  }

  goBack = () => {
    msg.emit('router: back');
  };
}
const styles = StyleSheet.create({
  safeView: {
    flex: 1,
  },
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
  },
  headerWrap: {
    flex: 1,
    marginTop: px2dp(12) * 2
  },

});
